<template>
  <d2-container>
    <template>
      <el-form
        ref="addForm"
        :model="addForm"
        label-width="135px"
        style="height: auto"
      >
        <template>
          <!-- <el-row
            ><el-col :span="24"
              ><div class="grid-content bg-purple-dark titleClass">
                类路径名
              </div></el-col
            ></el-row
          > -->
          <el-form-item label="类路径名">
            <el-input
              v-model="addForm.loggerName"
              style="width: 30%"
              placeholder="请输入类路径名"
            ></el-input>
            <el-button
              type="primary"
              @click="searchLoggerList()"
              style="margin-left: 20px"
              >查询</el-button
            >
            <el-button type="primary" @click="reset()" style="margin-left: 20px"
              >重置</el-button
            >
          </el-form-item>
          <el-form-item label="日志输出级别">
            <el-select v-model="addForm.level" placeholder="请选择输出级别">
              <el-option label="DEBUG" value="DEBUG"></el-option>
              <el-option label="INFO" value="INFO"></el-option>
              <el-option label="WARN" value="WARN"></el-option>
            </el-select>
            <el-button
              type="primary"
              @click="onSubmit('addForm')"
              style="margin-left: 20px"
              >确认修改</el-button
            >
          </el-form-item>
        </template>
        <!-- 保存 -->
        <template>
          <el-form-item>
            <!-- <el-button type="warning" @click="test()">打印测试类日志</el-button> -->
            <el-button type="danger" @click="restore()">一件还原</el-button>
          </el-form-item>
        </template>
      </el-form>
    </template>
    <template>
      <el-table
        :data="tableData"
        stripe border
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column fixed prop="name" label="类路径名"> </el-table-column>
        <el-table-column fixed prop="configuredLevel" label="配置日志输出级别">
        </el-table-column>
        <el-table-column fixed prop="effectiveLevel" label="生效日志输出级别">
        </el-table-column>
      </el-table>
    </template>
  </d2-container>
</template>
<script>
import {
  changeLoggerLevel,
  restoreLoggerLevel,
  loggerPrintTest,
  getLoggerList,
} from "@api/logControl/logControl";
export default {
  name: "system-route",
  data() {
    return {
      addForm: {
        loggerName: "",
        level: "DEBUG",
      },
      tableData: [],
      multipleSelection: [],
    };
  },
  watch: {},
  methods: {
    fetchData() {
      getLoggerList({ prifixName: this.addForm.loggerName })
        .then((res) => {
          this.tableData = res.data;
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    searchLoggerList() {
      if (this.addForm.loggerName == "") {
        this.$message({
          message: "请填写一个类路径",
          type: "error",
        });
        return;
      }
      this.fetchData();
    },
    onSubmit(formName) {
      if (this.addForm.loggerName == "") {
        this.$message({
          message: "请填写一个类路径",
          type: "error",
        });
        return;
      }
      this.$confirm("确认修改吗？").then((_) => {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.loading = true;
            var loggerNameList = "";
            this.multipleSelection.forEach(function (row) {
              loggerNameList += row.name + ",";
            });
            if (loggerNameList == "") {
              this.$message({
                message: "请先选择需要修改的类"+loggerNameList,
                type: "error",
              });
              return;
            }
            changeLoggerLevel({
              loggerNameList: loggerNameList,
              level: this.addForm.level,
            })
              .then((res) => {
                this.$message({
                  message: "修改成功",
                  type: "success",
                });
                this.fetchData();
                this.loading = false;
              })
              .catch((err) => {
                console.log("err", err);
                this.loading = false;
              });
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      });
    },
    restore() {
      this.$confirm("确认全部还原吗？").then((_) => {
        restoreLoggerLevel()
          .then((res) => {
            this.$message({
              message: "还原成功",
              type: "success",
            });
            this.fetchData();
            this.loading = false;
          })
          .catch((err) => {
            console.log("err", err);
            this.loading = false;
          });
      });
    },
    test() {
      loggerPrintTest()
        .then((res) => {
          this.$message({
            message: "日志打印成功",
            type: "success",
          });
          this.loading = false;
        })
        .catch((err) => {
          console.log("err", err);
          this.loading = false;
        });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    reset() {
      this.addForm.loggerName = "";
      this.tableData = [];
    },
  },
  created() {},
  mounted() {},
  computed: {},
};
</script>